<template>
  <div class="options">
    <el-form :model="formConfig" label-width="120px" label-position="top">
      <el-form-item label="视频名称">
        <el-input
          v-model="formConfig.videoName"
          maxlength="10"
          placeholder="Please input"
          show-word-limit
          type="text"
        />
      </el-form-item>
      <el-form-item label="视频分辨率">
        <el-select
          v-model="formConfig.videoFblSelect"
          placeholder="选择分辨率"
        >
          <el-option
            v-for="item in voiceSelectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <div style="display: flex; justify-content: space-between">
              <span style="margin-right: 5px">{{
                item.label
              }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="背景视频">
        <el-upload 
          action="#" 
          :file-list="uncomlist" 
          list-type="picture-card" 
          :auto-upload="false"
          :limit="1"
          :class="{hide: hideUpIcon}"
        >
          <el-icon><Plus /></el-icon>
          <template #file="{ file }">
            <div v-if="uncomlist.length != 0">
              <video class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions" v-if="!disabled">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="图片移动速速">
        <el-slider
          v-model="formConfig.speed"
          show-input
          size="small"
          :show-input-controls="false"
          :max="3000"
          :step="100"
        />
      </el-form-item>
      <el-form-item label="图片间隔时间">
        <el-slider
          v-model="formConfig.time"
          show-input
          size="small"
          :show-input-controls="false"
          :max="10"
          :step="0.01"
        />
      </el-form-item>
      <el-form-item class="startBtn">
        <div class="configOption">
          <el-button
            color="#626aef"
            :dark="false"
            plain
            size="small"
            @click="saveConfig"
            >保存配置</el-button
          >
          <el-select-v2
            class="get-cfg"
            v-model="currConfigName"
            placeholder="选择配置"
            filterable
            :options="config.configLable"
            @change="configChange"
          ></el-select-v2>
        </div>
        <a href="#" class="btn" @click="startBtn">
          <template v-if="isLoading">
            <Loading></Loading>
          </template>
          <template v-else> 开始合成 </template>
        </a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import Loading from "./Loading.vue";
import { ElMessage, ElMessageBox, UploadFile } from "element-plus";
import { useTtsStore } from "@/store/store";
import { storeToRefs } from "pinia";
import { Delete, Plus } from '@element-plus/icons-vue'

const disabled = ref(false)

let uncomlist:any = reactive([])
const handleRemove = (file: UploadFile) => {
  let index = uncomlist.find((item: { uid: number; }) => { item.uid == file.uid  })
  uncomlist.splice(index,1)
}

const ttsStore = useTtsStore();
const {
  fileList,
  formConfig,
  page,
  currConfigName,
  config,
  isLoading,
} = storeToRefs(ttsStore);
const Store = require("electron-store");
const store = new Store();

const saveConfig = () => {
  ElMessageBox.prompt(
    `<p>给此配置起一个简单的名字吧:)</p><br>默认显示的配置名：<strong>默认</strong>`,
    "保存配置",
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputValidator: (value: any) => {
        if (value == null || value == "" || value == undefined) {
          return false;
        } else {
          return true;
        }
      },
      inputErrorMessage: "错误的输入",
    }
  )
    .then(({ value }) => {
      currConfigName.value = value;
      config.value.formConfigJson[value] = formConfig.value;
      store.set("FormConfig." + value, formConfig.value);
      ttsStore.genFormConfig();
      ElMessage({
        message: "保存成功。",
        type: "success",
        duration: 2000,
      });
    })
    .catch(() => {
      ElMessage({
        message: "取消保存",
        type: "info",
        duration: 2000,
      });
    });
};

const voiceSelectList = ref(
  [
    { label: '1920*1080,16:9', value: '1920*1080'},
    { label: '640*480,4:3', value: '640*480'},
  ]
);

let hideUpIcon = computed(() => {
  return uncomlist.length == 1
} )

const configChange = (val: string) => {
  formConfig.value = config.value.formConfigJson[val];
  console.log(formConfig.value);
};

const startBtn = () => {
  formConfig.value.baseVideoPath = uncomlist.length == 0 ? '' : uncomlist[0].raw.path
  if (page.value.asideIndex == "1" && fileList.value.length == 0) {
    ElMessage({
      message: "请选择图片。",
      type: "warning",
      duration: 2000,
    });
    return;
  }
  for (const key in formConfig.value) {
    if (Object.prototype.hasOwnProperty.call(formConfig.value, key)) {
      if (!formConfig.value[key]) {
        ElMessage({
          message: "有空选项。",
          type: "warning",
          duration: 2000,
        });
        return;
      }
    }
  }
  if (isLoading.value) {
    ElMessage({
      message: "请稍后。。。",
      type: "warning",
      duration: 2000,
    });
    return;
  }
  isLoading.value = true;

  ttsStore.start();
};
</script>

<style scoped>
.options {
  background-color: #fff;
  margin-left: 5px;
  padding: 10px 12px !important;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
.el-form {
  height: 99%;
  display: flex;
  flex-direction: column;
}
.configOption {
  display: flex;
  flex-direction: column;
}
.el-form-item {
  width: 270px;
}
.el-slider {
  margin-left: 5px;
}
.el-select {
  width: 100% !important;
}
.languageSelect {
  width: 100% !important;
}
.get-cfg {
  margin-top: 2px;
  width: 100px;
}
:deep(.el-form-item__label) {
  margin-bottom: 2px !important;
}
:deep(.el-slider__runway.show-input) {
  margin-right: 10px;
}
:deep(.el-slider > .el-input-number) {
  width: 40px;
}
:deep(.el-slider .el-input__wrapper) {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
/* From uiverse.io by @Zena4L */
.startBtn {
  margin-bottom: 0 !important;
  flex: 1;
  display: flex !important;
  align-items: flex-end;
}
:deep(.startBtn > .el-form-item__content) {
  justify-content: space-around;
}
.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(27, 27, 27);
  padding: 8px 30px;
  border: 1px solid;
  border-radius: 1000px;
  display: inline-block;
  transition: all 0.2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(27, 27, 27, 0.5);
}

.btn:active {
  transform: translateY(-3px);
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  transition: all 0.3s;
}
.btn:hover::after {
  background-color: rgb(0, 238, 255);
  transform: scaleX(1.4) scaleY(1.5);
  opacity: 0;
}
:deep(.hide .el-upload--picture-card) {
  display: none;
}
</style>
